<template>
	<!-- vue content -->
	<view class="ver common-body " style="background: #edf3f1;position: relative">
		<bodyCustom title="精品课程">
			<view class="pd-lr25 pd-t20">
				<image src="https://cdxf.5gsxt.cn/images/fo/jpkc.jpg" style="" class="corner20 match-width"
					mode="widthFix">
				</image>
				<view class=" match-width" style="">
					<view style="height: 40rpx;"></view>
					<view class="hor ver-center">
						<image src="../../static/img/ic_jinpai.png" style="height: 50rpx;width: 50rpx;">
						</image>
						<view class="mg-l-10 uni-bold font-text-color-black font16">精品课程</view>
					</view>
					<view class="pd-tb25"></view>
					<view v-for="(item,index) in allList" :key="index"
						class="hor ver-center mg-b-20 bg-white corner10 pd-lr25 pd-tb25"
						@click="onClickItem(item,index)">
						<view class="flex1 uni-bold font14 ">{{item.lessonName}}</view>
						<image src="../../static/img/ic_arrow_right_black.png" style="height: 30rpx;width: 30rpx;">
						</image>
					</view>

				</view>
				<view class="" style="height: 10vh;"></view>
				<empty-layout id="empty" offsetTop="400rpx" :emptyStatus="emptyStatus" positionMode="1" v-if="emptyShow"
					emptyHint="暂无内容" @retry="onRefresh">
				</empty-layout>
			</view>
		</bodyCustom>
	</view>
</template>

<script>
	let _this
	export default {
		components: {},
		data() {
			return {
				contentHeight: 0,
				contentWidth: 0,
				emptyShow: false,
				emptyStatus: 1,
				emptyHint: "",
				authUser: null,
				auditStatus: 0,
				platform: 0,
				titleHeight: 0,

				page: 1,
				size: 20,

				allList: [],
				youxiuList: [],
				isLoading: false, //是否加载中

			}
		},
		onLoad(option) {
			_this = this;
			this.initUser(option, this, false);
			this.inviteUserId = option.inviteUserId

			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					var windowWidth = res.windowWidth;
					_this.contentHeight = windowHeight;
					_this.contentWidth = windowWidth

					_this.bottomHeight = _this.contentHeight - uni.upx2px(120)
					// console.log(res)

					_this.titleHeight = res.statusBarHeight + uni.upx2px(70)
					// console.log(_this.titleHeight)
				}
			});
			this.onRefresh()
		},
		onUnload() {
			console.log("卸载")
		},
		onShow() {
			this.initUser(null, this, false);

		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			uni.$emit('onPageScroll', res.scrollTop);
		},
		methods: {
			onRefresh() {
				this.page = 1;
				this.getData()
			},
			getData() {
				_this.allList = []
				this.sendRequest({
					url: "lesson/listWxPaging",
					data: {
						lessonType: 2,
						status: 0,
						pageNum: this.page,
						pageSize: this.size
					},
					method: "GET",
					page: _this,
					success: function(res) {
						uni.stopPullDownRefresh();
						_this.emptyShow = false;
						_this.isLoading = false;

						const list = res.data.records;

						for (var i = 0; i < list.length; i++) {
							_this.allList.push(list[i])
						}
						console.log(_this.allList)
					},
					codeFail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					},
					fail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					}
				})
			},
			onClickItem(item, index) {
				uni.navigateTo({
					url: "/pages/lesson/lessonJPDetail?lessonId=" + item.lessonId
				})
			},
			onClickType(type) {
				this.type = type

				this.page = 1
				this.allList = []
				this.getData();
			}

		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #edf3f1;
	}

	.u-fixed-b {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		z-index: 50;
	}

	.body-bg {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(0deg, #e1cdf2, #edeaff, #c2edf5);
		/* 背景尺寸 - 原理3 */
		background-size: 100% 100%;
	}


	.gradient1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #eeb354, #e742c4, #2cd589, #3970d5);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	.gradient2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	/* 动画，控制背景 background-position */
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.gap {
		height: 1px;
		background-color: #f1f1f1;
	}

	.black-gradient-ver {
		background-image: linear-gradient(transparent, #ffffff);
	}

	.bg-gradient-blue1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #2b35ff, #8f95ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #6e25ff, #9361ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue3 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #238dff, #50a5ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}
</style>